<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
			#box1{
<!--				border: solid red 1px;-->
				position:absolute;
				top:5%;
				left:5%;
				width:500px;
				height:400px;
			}
			#box2{
				border:   1px;
				position:absolute;
				top:5%;
				left:calc(35% - 25px);
				width:500px;
				height:400px;
			}
			#box3{
				border:   1px;
				position:absolute;
				top:5%;
				right:5%;
				width:500px;
				height:400px;
			}
			#box4{
				border:  1px;
				position:absolute;
				top:60%;
				left:5%;
				width:500px;
				height:400px;
			}
			#box5{
				border:   1px;
				position:absolute;
				top:60%;
				left:35%;
				width:500px;
				height:400px;
			}
			#box6{
				border:   1px;
				position:absolute;
				top:60%;
				right:5%;
				width:600px;
				height:400px;
			}

		</style>
    <script src="../static/js/echarts.min.js"></script>
	<!--    3d图形必须要导入这个库，否则不显示图形	-->
	<!-- 引入 echarts-gl 库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
	<!--     导入词云组件	-->
	<script src="../static/js/echarts-wordcloud-2.1.0/dist/echarts-wordcloud.min.js"></script>
</head>
<body>
<div id="box">
			<div id="box1"></div>
			<div id="box2"></div>
			<div id="box3"></div>
			<div id="box4"></div>
			<div id="box5"></div>
			<div id="box6"></div>
		</div>
<!--   js代码	-->
	<script>
	//	 图1：柱状图
		//	初始化echarts
		var mychart1=echarts.init(document.getElementById("box1"));
		//	数据源 flask的写法，引入python的data1变量
		var data1={{data1|tojson|safe}};
		//	创建数组存储x轴和y轴的数据
		var data1_x=[];
		var data1_y=[];
		for(var key in data1){
			data1_x.push(data1[key]['name']);
			data1_y.push(data1[key]['value']);
		};
		//	图形的设置
		option = {
    title: {
        text: '各城市二手车数量Top10',
        left: 'center',
        textStyle: {
            fontSize: 25,
            fontWeight: 'bold'
        }
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
        formatter: '{b}<br/>数量: {c}'
    },
    xAxis: {
        type: 'category',
        data: data1_x,
        axisLabel: {
            rotate: 30, // 如果城市名太长可以旋转30度
            interval: 0 // 强制显示所有标签
        }
    },
    yAxis: {
        type: 'value',
        name: '数量'
    },
    series: [{
        name: '二手车数量',
        data: data1_y,
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
        },
        itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
            ])
        },
        emphasis: {
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#2378f7' },
                    { offset: 0.7, color: '#2378f7' },
                    { offset: 1, color: '#83bff6' }
                ])
            }
        },
        label: {
            show: true,
            position: 'top',
            formatter: '{c}'
        }
    }]
};

		//	展示图形1
		mychart1.setOption(option);



	//	图2：面积图
		//	初始化echarts
		var mychart2=echarts.init(document.getElementById("box2"));
		//	数据源 flask的写法，引入python的data1变量
		var data2={{data2|tojson|safe}};
		//	创建数组存储x轴和y轴的数据
		var data2_x=[];
		var data2_y=[];
		for(var key in data1){
			data2_x.push(data2[key]['name']);
			data2_y.push(data2[key]['value']);
		};
		//	图形的设置
		option = {
    title: {
        text: '各生产年份车辆现存数量分布',
        left: 'center',
		top:0,
        textStyle: {
            fontSize: 25,
            fontWeight: 'bold'
        }
    },
    tooltip: {
        trigger: 'axis',
        formatter: function(params) {
            return params[0].name + '年<br/>数量: ' + params[0].value;
        },
        axisPointer: {
            type: 'line',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: data2_x,
        name: '年份',
        axisLabel: {
            rotate: 30 // 如果年份多可以旋转
        }
    },
    yAxis: {
        type: 'value',
        name: '数量'
    },
    series: [{
        name: '二手车数量',
        type: 'line',
        smooth: true, // 平滑曲线
        areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(58, 77, 233, 0.8)' },
                { offset: 1, color: 'rgba(58, 77, 233, 0.1)' }
            ])
        },
        itemStyle: {
            color: '#3a4de9' // 线条颜色
        },
        emphasis: {
            focus: 'series',
            itemStyle: {
                color: '#ff7f50' // 高亮颜色
            }
        },
        data: data2_y,
        markPoint: { // 可选：标记点
            data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
            ]
        }
    }],
    grid: {
        containLabel: true // 防止标签被截断
    }
};


		//	展示图形2
		mychart2.setOption(option);


		//	图3：饼图
		//	初始化echarts
		var mychart3=echarts.init(document.getElementById("box3"));
		//	数据源 flask的写法，引入python的data1变量
		var data3={{data3|tojson|safe}};
		//	创建数组存储x轴和y轴的数据
		//	图形的设置
		option = {
  title: {
    text: '大于和小于平均行驶路程的占比情况',
    left: 'center',
	  top:5,
	  textStyle: {
            fontSize: 25,
            fontWeight: 'bold'
        }
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
	 top:50
  },
  series: [
    {
      name: '数量',
      type: 'pie',
      radius: '60%',
		 center: ['50%', '50%'],
      data: data3,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};


		//	展示图形3
		mychart3.setOption(option);


		//	图4：半环形图
		//	初始化echarts
		var mychart4=echarts.init(document.getElementById("box4"));
		//	数据源 flask的写法，引入python的data1变量
		var data4={{data4|tojson|safe}};
		//	创建数组存储x轴和y轴的数据
		//	图形的设置
		// This example requires ECharts v5.5.0 or later
// This example requires ECharts v5.5.0 or later
option = {
	 title: {
        text: '低于和高于平均降价的数量占比',
        left: 'center',
        textStyle: {
            fontSize: 25,
            fontWeight: 'bold'
        }
    },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '8%',
    left: 'center'
  },
  series: [
    {
      name: '数量',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '70%'],
      // adjust the start and end angle
      startAngle: 180,
      endAngle: 360,
      data: data4
    }
  ]
};


		//	展示图形4
		mychart4.setOption(option);


		//	图5：折线图
		//	初始化echarts
		var mychart5=echarts.init(document.getElementById("box5"));
		//	数据源 flask的写法，引入python的data1变量
		var data5={{data5|tojson|safe}};
		//	创建数组存储x轴和y轴的数据
		var data5_x=[];
		var data5_y1=[];
		var data5_y2=[];
		for(var key in data5){
			data5_x.push(data5[key]['x']);
			data5_y1.push(data5[key]['y']);
			data5_y2.push(data5[key]['z']);

		};
		//	图形的设置
option = {
    title: {
        text: '各城市二手车平均售价以及数量',
        left: 'center',
        top: 0,  // 标题位置调整到顶部
        textStyle: {
            fontSize: 25,
            fontWeight: 'bold'
        }
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['平均售价', '数量'],
        top: 30,  // 图例下移，避免与标题重叠
        left: 'center'  // 图例居中
    },
    grid: {
        top: 80,  // 图表区域下移，给标题和图例留出空间
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: data5_x
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '平均售价',
            type: 'line',
            stack: 'Total',
            data: data5_y1
        },
        {
            name: '数量',
            type: 'line',
            stack: 'Total',
            data: data5_y2
        }
    ]
};


		//	展示图形5
		mychart5.setOption(option);

	//	图6：词云图
		//	初始化echarts
		var mychart6=echarts.init(document.getElementById("box6"));
		//	数据源 flask的写法，引入python的data1变量
		var data6={{data6|tojson|safe}};
		//	图形的设置
var option = {
        	title:{
						text:'二手车年龄占比',
						left:'center',
						top:0,
				textStyle: {
            fontSize: 25,
            fontWeight: 'bold'
        }
					},
            series: [{
                type: 'wordCloud',
                shape: 'circle',
                gridSize: 30,
                sizeRange: [20, 70], // 字体大小范围
                 rotationRange: [-30, 30], // 减小旋转幅度
                textStyle: {
                    normal: {
                        color: function () {
                            return 'rgb(' + [
                                Math.round(Math.random() * 255),
                                Math.round(Math.random() * 255),
                                Math.round(Math.random() * 255)
                            ].join(',') + ')';
                        }
                    }
                },
                data: data6
            }]
        };


		//	展示图形6
		mychart6.setOption(option);




	</script>
</body>
</html>